<template>
	<div class="slider">
		<div class="range">
			<span class="text" style="margin-right: 10rpx">{{ modelValue[0] }}</span>
			<cjSlider class="cjSlider" :disabled="disabled" v-model="modelValue" :min="min" :max="max" :step="step" @start="blockStart" @moving="blockMoving" @end="blockEnd" :height="5"></cjSlider>
			<span class="text" style="margin-left: 10rpx">{{ modelValue[1] }}</span>
		</div>
	</div>
</template>

<script>
import cjSlider from "@/components/cj-slider/cj-slider.vue"
export default {
	name: "vSlider",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: Array,
			default: 0,
		},
		min: {
			type: Number,
			default: 0,
		},
		max: {
			type: Number,
			default: 100,
		},
		step: {
			type: Number,
			default: 1,
		},
		range: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {}
	},
	computed: {
		modelValue: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
	},
	methods: {
		blockStart() {
			// console.log("滑动触发")
		},
		blockMoving() {
			// console.log("正在滑动中")
			this.$emit("update:value", this.modelValue)
		},
		blockEnd() {
			this.$emit("update:value", this.modelValue)
			// console.log("滑动结束")
		},
	},
	components: {
		cjSlider,
	},
	watch: {
		modelValue: {
			immediate: true,
			handler(val) {
				console.log(val, "val")
			},
		},
	},
}
</script>
<style lang="scss" scoped>
.slider {
	width: 100%;
}
.range {
	display: flex;
	gap: 10rpx;
	align-items: center;
	.cjSlider {
		width: 100%;
	}
	.text {
		color: #888;
	}
}
</style>
